<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8"/>
    <title>daogouUploader主题 </title>
    <script src="http://g.tbcdn.cn/kissy/k/1.4.2/seed-min.js" charset="utf-8"></script>
    <link href='http://a.tbcdn.cn/tbsp/tbsp.css?t=20090602.css' rel='stylesheet' type='text/css' />
</head>

<body style="padding:20px;">
<h2>daogouUploader主题</h2>
<ul>
    <li><a href="https://github.com/KF-kissyForm/butterfly/tree/master/gallery/uploader/1.5.4/themes/daogouUploader" target="_blank">源码</a></li>
    <li>作者：溪夏、明河</li>
    <li>描述：v1.3新增主题，来源于淘宝导购平台，单文件上传</li>
    <li>案例：淘宝导购平台</li>
    <li>兼容：IE6+、chrome、firefox、safari</li>
</ul>

<div class="c-dg-popup dg-up-sdk" style="margin-top:30px;">
    <div class="c-h">
        <h3>上传网站代码</h3>
        <a href="#" class="close"></a>
    </div>
    <div class="c-c">
        <div class="c-i">
            <div class="J_UploadArea">
                <div class="tx">请上传代码包，支持上传<i class="dg-light">zip</i>、<i class="dg-light">gz</i>、<i class="dg-light">tar.gz</i>三种代码包，文件大小不超过<i class="dg-light">20M</i></div>
                <div class="upload">
                    <input type="text" class="select-input J_FileName" value=""><div class="select-btn">选择文件</div>
                    <!--下面才是真正的上传按钮-->
                    <input type="file" class="g-u" id="J_UploaderBtn" value="选择文件" name="Filedata" >
                    <input type="hidden" id="J_Urls" name="urls" value="">
                </div>
            </div>
            <!--上传队列，默认是隐藏的-->
            <div id="J_UploaderQueue"></div>
            <div class="b-c">
                <div class="J_UploadingBtn">
                    <a href="#" class="c-normal-button J_Upload"><b>立即上传</b></a>
                    <a href="#" class="c-normal-gray-button J_Cancel"><b>取消</b></a>
                </div>
                <a href="#" class="c-normal-button J_Sure btn-hide"><b>确定</b></a>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var S = KISSY;
    if (S.Config.debug) {
        var srcPath = "../../../../";
        S.config({
            packages:[
                {
                    name:"gallery",
                    path:srcPath,
                    charset:"utf-8"
                }
            ]
        });
    }
    var $ = S.Node.all;

    S.use('gallery/uploader/1.5.4/index,gallery/uploader/1.5.4/themes/daogouUploader/index,gallery/uploader/1.5.4/themes/daogouUploader/style.css', function (S, Uploader,DaogouUploader) {
        //上传组件插件
        var plugins = 'gallery/uploader/1.5.4/plugins/auth/auth,' +
                'gallery/uploader/1.5.4/plugins/urlsInput/urlsInput,' +
                'gallery/uploader/1.5.4/plugins/proBars/proBars,' +
                'gallery/uploader/1.5.4/plugins/filedrop/filedrop,' +
                'gallery/uploader/1.5.4/plugins/preview/preview';

        S.use(plugins,function(S,Auth,UrlsInput,ProBars,Filedrop,Preview){
            var uploader = new Uploader('#J_UploaderBtn',{
                //处理上传的服务器端脚本路径
                action:"upload.php",
                //禁用多选
                multiple : false,
                //不使用自动上传
                autoUpload:false
            });
            //使用主题
            uploader.theme(new DaogouUploader({
                queueTarget:'#J_UploaderQueue'
            }))
            //验证插件
            uploader.plug(new Auth({
                        //最多上传个数
                        max:3,
                        //图片最大允许大小
                        maxSize:100
                    }))
                //url保存插件
                    .plug(new UrlsInput({target:'#J_Urls'}))
                //进度条集合
                    .plug(new ProBars())
            ;

            uploader.on('start',function(){
                $('.J_UploadArea').hide();
                $('#J_UploaderQueue').show();
            });
            uploader.on('success',function(){
                $('.J_UploadingBtn').hide();
                $('.J_Sure').show();
            });
            $('.J_Upload').on('click',function(ev){
                var disabled = uploader.get('disabled');
                if(disabled) return false;
                uploader.uploadFiles();
            });
            $('.J_Cancel').on('click',function(ev){
                uploader.stop();
            })
        });
    })
</script>
</body>
</html>
